{% load staticfiles %}
{% load bootstrap3 %}
{% load avatar_tags %}
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>尘归尘{% block title %}{% endblock title %}</title>
    <link rel="icon" type="image/png" href="{% static 'qa/Questionmark-icon.png' %}">
    <script src="{% static 'jquery/3.3.1/jquery.min.js' %}"></script>

    <!-- <link href='//fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> -->
    <!-- <link href='//fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'> -->

    <link href="{% static 'twitter-bootstrap/3.3.7/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/qa.css' %}" rel="stylesheet"/>
  </head>
  <body>
    <div class="topbar">
      <a class="btn btn-lg" href="#search">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查&nbsp;&nbsp;询 </a>
      <a class="btn btn-lg" href="{% url 'qa_create_question' %}">
         <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 发现问题 </a>
      <div id="user_avatar">
        {% if user.is_authenticated %}
          {% avatar user 35 class="img-circle img-responsive head-ding" %}
        {% else %}
          <h3><a class="head-ding" href="{% url 'login' %}">登 录</a></h3>
        {% endif %}
    <!--       {% if user.is_authenticated %}
            {{ user.username }}
        {% endif %} -->
        <div class="info" id="disinfo">
          <ul class="ul-user">
          {% if user.is_authenticated %}
              <li>昵称：<strong>{{ user.username }}</strong></li>
              <li><a href="{% url 'avatar_change' %}">修改头像</a></li>
              {% if user.is_superuser %}
                  <li><a href="{% url 'admin:index' %}">管理面板</a></li>
              {% endif %}
              <li><a class="genggaipass" href="#">更改密码</a></li>
              <li><a href="{% url 'logout' %}">注 销</a></li>
          {% endif %}
          </ul>
          <div class="navl navl-background"></div>
        </div>
      </div>
    </div>
    <div class="container">
      
      <h1>
        <a class="main-title" href="{% url 'qa_index' %}">
        <div class="img-float">
        <img width="50px" src="{% static 'qa/wenhao.png' %}" />
        </div>
        等你来提问</a>
        <small>无所不知</small>
      </h1>
      </div>
    </div>

    <div class="container">
      {% if messages %}
      {% for message in messages %}
      <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">{{ message }}</div>
      {% endfor %}
      {% endif %}
      {% block content %}

      {% endblock content %}
      <div id="search">
        <button type="button" class="close">×</button>
        <form method="GET" action="{% url 'qa_search' %}">
          <input type="search" value="" name="word" placeholder="你想找什么呢？" />
          <input class="btn btn-lg btn-warning" type="submit" value="查找" />
        </form>
  
      </div>
    </div>
    <hr>
    <center>
      <a href="http://www.djangoproject.com/"><img src="https://www.djangoproject.com/m/img/badges/djangoproject120x25.gif" border="0" alt="A Django project." title="A Django project." /></a> ·
      <a href="https://gitee.com/yx_520/tiaopi">Github</a> ·
      <a data-toggle="modal" data-target="#apiModal">API</a> ·
      <small><a href="/admin">管理面板</a></small>
    </center>
      <br/><br/>


    <!-- Modal -->
    <div class="modal fade" id="apiModal" tabindex="-1" role="dialog" aria-labelledby="APIModal" aria-hidden="true">
      <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> API Access</h4>
    </div>
    <div class="modal-body">
            <ul>
              <li>
   <b>问题清单</b>
   <br/>重新排列问题清单.
   <br/>json URL : <code class="custom-code">http://djangoqa.azurewebsites.net/api/questions/?format=json</code>
              </li>
              <br/>
              <li>
   <b>用户列表</b>
   <br/>检索用户列表.
   <br/>json URL : <code class="custom-code">http://djangoqa.azurewebsites.net/api/users/?format=json</code>
              </li>
            </ul>
    </div>
    <div class="modal-footer">
            <button type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
    </div>
  </div>
      </div>
    </div>

    {% block js %}
    <script>
      $(function () {
        if($('#shifei').text()=='')
          $('#faxianjue').show();
        else
          $('#faxianjue').hide();
        $('a[href="#search"]').on('click', function(event) {
          event.preventDefault();
          $('#search').addClass('open');
          $('#search > form > input[type="search"]').focus();
          });

        $('#search, #search button.close').on('click keyup', function(event) {
          if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
          $(this).removeClass('open');
          }
        });
        $('#user_avatar').hover(function(){
          var de = $('#user_avatar > h3 > a').text();
          if(de == '登 录')
            $('#disinfo').hide();
          else
            $('#disinfo').show();
        },function(){
          $('#disinfo').hide();
        });
        $('body > div:nth-child(2) > h1 > a').click(function(){
          // $('#faxianjue').hide();
        });
        $('#latest > div > a').click(function (){
          // $('#faxianjue').hide();
        });

        var i = 0;
        var interval = setInterval(function(){
          $('.img-float').css('transform', 'rotateY('+i+'deg)');
          i+=1;
          if (i==361)
            i=0;
        },10);
        $('.genggaipass').click(function(){
          alert('请通知管理员，更改密码！')
        });
      });
    </script>
    <script src="{% static 'twitter-bootstrap/3.3.7/js/bootstrap.min.js' %}" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    {% endblock js %}
    {%block extra_js %}{% endblock extra_js %}

  </body>
</html>
